<script setup lang="ts">
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import useHomeStore from "@/pinia/homeStore.ts";
import {storeToRefs} from "pinia";

const emits = defineEmits(['getLevel'])
const homeStore = useHomeStore()

const dictCode = ref<string>('HosType')
const level = ref<string>('')
const {levelList} = storeToRefs(homeStore)

const fetchLevelList = async () => {
  try {
    await homeStore.fetchLevelList(dictCode.value)
  } catch (error) {
    ElMessage.warning(error.message)
  }
}
const changeLevel = (value: string) => {
  level.value = value
  emits('getLevel', value)
}
onMounted(() => {
  fetchLevelList()
})

</script>

<template>
  <div class="level">
    <h1>医院</h1>
    <div class="content">
      <span class="left">等级:</span>
      <ul class="right">
        <li :class="{active:level===''}" @click="changeLevel('')">全部</li>
        <li v-for="item in levelList" :key="item.id" :class="{active:level===item.value}" @click="changeLevel(item.value)">{{ item.name }}</li>
      </ul>
    </div>
  </div>
</template>

<style scoped lang="scss">
.level {
  color: #7f7f7f;

  h1 {
    margin: 10px 0;
    font-size: 16px;
    color: #000;
  }

  .content {
    display: flex;
    align-items: center;
    margin: 20px 0;

    .left {
      margin-right: 10px;
    }

    .right {
      display: flex;

      li {
        margin: 5px;
        cursor: pointer;
        color: #999999;
        font-size: 14px;

        &.active {
          color: #4490f1;
        }

        &:hover {
          color: #4490f1;

        }
      }
    }
  }
}
</style>
